.search{
  width: 100%;
  height: 100vh;
  // background-color: red;
  .head{
    margin-top: 36rpx;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    .right{
      input{
        width: 460rpx;
        height: 60rpx;
        border-radius: 40rpx;
        margin-top: 14rpx;
        padding-left:30rpx ;
        background-color: #eeeeee;
        font-size: 28rpx;
      }
    }
  }
  .middle{
    width: 100%;
    height: 800rpx;
    margin-top: 10rpx;
    .popular{
      width: 100%;
      height: 180rpx;
      background-color: white;
      .popular-top{
        font-size: 26rpx;
        font-weight: bold;
        margin-left: 20rpx;
      }
      .popular-bottom{
        width: 100%;
        height: 100rpx;
        margin-top: 10rpx;
        padding-left: 10rpx;
        .item{
          margin-bottom: 10rpx;
          margin-right: 30rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          padding-left: 10rpx;
          padding-right: 10rpx;
          font-size: 28rpx;
          border-radius: 24rpx;
          border: 1rpx solid #cccccc;
        }
        .highlighted{
          border: 1rpx solid red;
        }
      }
    }
    .history{
      .history-top{
        margin-left: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        .waste{
          margin-right: 40rpx;
        }
      }
      .history-bottom{
        width: 90%;
        height: 40rpx;
        margin:20rpx;
        .item{
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;
          .item-left{
            font-size: 24rpx;
            padding-left: 10rpx;
            color: #919191;
          }
          .item-right{
            z-index: 10000;
            padding-right:20rpx ;
          }
        }
      }
    }
  }
}